<template>
    <div class="bg-white rounded-8px mb-20px">
        <div class="p-30px justify-between text-24px">
            <div class=" text-18px font-600 text-dark-500">{{ communityInfo.com_title }}</div>
            <div class="p-20px text-16px font-weight-400 leading-32px text-dark-400">
                {{ communityInfo.com_content }}
            </div>
            <div class="px-20px mb-20px" v-if="communityInfo.com_img">
                <el-image :src="communityInfo.com_img" class="w-500px"></el-image>
            </div>
            <div class="text-14px flex text-gray-500">
                <div class="mx-30px">{{ communityInfo.nickname }}</div>
                <div class="mx-30px">{{ communityInfo.com_addtime }}</div>
                <div class="flex mx-30px linkText" @click="goReply(communityInfo.com_user)">
                    <div class="flex"><el-icon><Edit /></el-icon></div>
                    <div class="">回复</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-8px mb-20px">
        <div class="p-30px text-16px">
            <el-divider content-position="center">回复列表</el-divider>
            <block v-for="(item,index) in replyList">
				<div class="mt-15px text-dark-500" :class="index % 2 == 0?'':''">
					<div class="p-10px">{{item.post_content}}</div>
					<div class="mt-10px" v-if="item.post_img">
						<el-image mode="widthFix" width="300px" :src="item.post_img"></el-image>
					</div>
					
					<div class="flex justify-between mt-10px text-12px bg-gray-50 p-10px rounded-5px">
						<div class="self-center">用户：{{item.nickname}}</div>
						<div class="text-gray-500 self-center">{{item.post_addtime}}</div>
						<div class="flex mx-30px linkText" @click="goReply(item.post_user)">
                            <div class="flex"><el-icon><Edit /></el-icon></div>
                            <div class="">回复</div>
                        </div>
						
					</div>
					
				</div>
            </block>
        </div>
        <div class="text-center mt-30px"><el-pagination class="justify-center" @current-change="handleCurrentChange" :hide-on-single-page="true" background layout="prev, pager, next" :page-count="totalPages" /></div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="添加回复"
        width="600"
        :before-close="handleClose"
    >
        <div class="px-20px">
            <div class="mb-5px">内容：</div>
            <div><el-input
                    v-model="postData.com_content"
                    
                    :rows="3"
                    type="textarea"
                    placeholder="请输入内容"
                />
            </div>
        </div>
        <div class="px-20px mt-30px">
            <div class="mb-5px">图片：</div>
            <div><el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="configHeaders"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <div v-else class="w-150px h-150px text-center leading-150px border border-dashed border-gray-300 rounded-8px">
                        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                    </div>
                    
                </el-upload>
            </div>
        </div>
        <div class="px-20px mt-30px mb-20px text-center">
            <el-button class="w-530px" type="primary" @click="submit">提交</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
    import { Edit,Search } from '@element-plus/icons-vue'
    import { ref,onMounted,computed,watch, nextTick } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { useUserStore } from '../../stores/user'
    import { Minus, Plus } from '@element-plus/icons-vue';
    import DOMPurify from 'dompurify';
    import { ElMessage } from 'element-plus';

    const config = configStore()
    const userStore = useUserStore()
    const totalPages=ref(0)
    const complete=ref(0)
    const currentPage = ref(0)
    const communityList = ref([])
    const keyword = ref('')
    const route = useRoute()
    const router = useRouter()
    const com_id = ref(route.query.com_id)
    const communityInfo = ref({})
    const replyList = ref([])
    const dialogVisible = ref(false)
    const configHeaders = ref({})
    const uploadUrl = ref('')
    const imageUrl = ref('')
    const postData = ref({})

    const init = async ()=>{
        let configData = config.getConfig()
        let token = userStore.getToken()
        uploadUrl.value = configData.upload.uploadurl
        
        configHeaders.value = {
            'token':token
        }
        postData.value.com_id = com_id.value
        let params = {
            "com_id":com_id.value
        }
        let res = await httpApi.getCommunityDetail(params)
        if(res.code){
            communityInfo.value = res.data.detail
            replyList.value = res.data.reply
            console.log(res)
        }
    }

    const handleAvatarSuccess = (response, uploadFile) => {
        //console.log(uploadFile.response.data.url);
        imageUrl.value = uploadFile.response.data.fullurl;
        postData.value.com_img = uploadFile.response.data.url
    }

    const submit = async ()=>{
        let res = await httpApi.addContent(postData.value)
        if(res.code){
            ElMessage.success(res.msg)
            dialogVisible.value = false
            init()
        }
    }

    const goReply = (pxid)=>{
        postData.value.post_pxid = pxid
        dialogVisible.value = true
    }

    onMounted(()=>{
        init()
    })

</script>
<style scoped>
    .linkText{
        cursor: pointer;
    }
</style>